<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>Document</title>
        <script src = 'jquery-1.10.1.min.js'></script>
        <script>
            /* 
                • trigger()  主动触发
                • ev.data 


                ev.target(兼容后触发对象) 
                ev.type(输出事件类型)

             */
             $(function(){
                /* $("button").click(function(ev){
                    alert(ev.type);
                    alert(ev.target);
                }) */


                //配合on使用 
                /* $("button").on("click", {username: "钢铁侠", age: 18}, function(ev){
                    alert(ev.data); //拿到传入的参数
                    alert(ev.data.username);
                    alert(ev.data.age);

                    alert(1);
                })

                $("button").on("click", function(){
                    alert(1);
                }) */

                /* 
                    trigger() 可以触发官方定义的事件以外
                              还可以触发我们自定义的事件

                    音乐播放器
                 */

                // $("button").trigger("click");


                $("#play").on("play", function(){
                    alert("开始播放音乐");
                })

                $("#play").on("next", function(){
                    alert("切换到下一首歌曲");
                })
                $("button").eq(0).click(function(){
                    $("#play").trigger("play");
                })
                $("button").eq(1).click(function(){
                    $("#play").trigger("next");
                })

               

             })
        </script>
    </head>
    <body>
        <button>播放</button>
        <button>下一首</button>
        <div id = 'play'></div>
    </body>
</html>